<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/login.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="form-box" >
        <!-- 注册 -->
        <form id="registerForm" class="form-horizontal" method="post">
            <div class="register-box hidden">
                <h1>register</h1>
                <input type="text" placeholder="用户名" name="registerUsername" id="registerUsername">
                <input type="password" placeholder="密码" name="registerPassword" id="registerPassword">
                <input type="password" placeholder="确认密码" name="registerRepeatedPassword" id="registerRepeatedPassword">
                <label id="labelTip" ></label>
                <button type="button" id="registerButton">注册</button>
                <% if (request.getAttribute("successMessage") != null || request.getAttribute("errorMessage") != null) { %>
                <div style="margin-top: 10px;">
                    <% if (request.getAttribute("successMessage") != null) { %>
                    <div style="color: green;"><%= request.getAttribute("successMessage") %></div>
                    <% } else if (request.getAttribute("errorMessage") != null) { %>
                    <div style="color: purple;"><%= request.getAttribute("errorMessage") %></div>
                    <% } %>
                </div>
                <% } %>
            </div>
        </form>
        <!-- 登录 -->
        <form class="form-horizontal" action="${pageContext.request.contextPath}/LoginServlet" method="post">
            <div class="login-box">
                <h1>login</h1>
                <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名" name="username">
                <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" name="password">
                <div style="color: purple">${requestScope.msg}</div>
                <button type="submit">登录</button>
            </div>
        </form>
    </div>
    <div class="con-box left">
        <h2>欢迎来到<span>图书管理系统</span></h2>
        <p>快来查阅<span>图书</span>吧</p>
        <img src="static/images/book1.png" alt="">
        <p>已有账号?</p>
        <button id="login">去登录</button>
    </div>
    <div class="con-box right">
        <h2>欢迎来到<span>图书管理系统</span></h2>
        <p>快来查阅<span>图书</span>吧</p>
        <img src="static/images/book2.png" alt="">
        <p>没有账号？</p>
        <button id="register">去注册</button>
    </div>
</div>
<script>
    let login=document.getElementById('login');
    let register=document.getElementById('register');
    let form_box=document.getElementsByClassName('form-box')[0];
    let register_box=document.getElementsByClassName('register-box')[0];
    let login_box=document.getElementsByClassName('login-box')[0];

    register.addEventListener('click',()=>{
        form_box.style.transform='translateX(80%)';
        login_box.classList.add('hidden');
        register_box.classList.remove('hidden');

        // 清除之前的注册结果消息
        let previousMessage = document.querySelector('.register-box div');
        if (previousMessage) {
            previousMessage.remove();
        }
    })

    login.addEventListener('click',()=>{
        form_box.style.transform='translateX(0%)';
        register_box.classList.add('hidden');
        login_box.classList.remove('hidden');

        // 清除之前的注册结果消息
        let previousMessage = document.querySelector('.register-box div');
        if (previousMessage) {
            previousMessage.remove();
        }
    })
</script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
